<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            border: 1px solid #000;
            padding: 0 20px 20px;
        }

        #box1 p {
            white-space: normal;
        }

        #box2 {
            border: 1px solid #000;
            padding: 0 20px 20px;
        }

        #box2 p {
            white-space: nowrap;
        }

        #box3 {
            border: 1px solid #000;
            padding: 0 20px 20px;
        }

        #box3 p {
            white-space: pre;
        }

        #box4 {
            border: 1px solid #000;
            padding: 0 20px 20px;
        }

        #box4 p {
            white-space: pre-line;
        }

        #box5 {
            border: 1px solid #000;
            padding: 0 20px 20px;
        }

        #box5 p {
            white-space: pre-wrap;
        }
    </style>
</head>

<body>
    <h2>文本的属性</h2>
    <br>
    <h3>1.处理空白符：white-space</h3>
    <br>
    <h4>--->关键字：normal: white-space:normal</h4>
    <p>默认。浏览器忽略空白，多行合并为一行</p>
    <div id="box1">
        <p>
            这是一段文字。
            这是一段包含多个空格       的文字。
            这是一段文字。
           （编辑器分为4行）
        </p>
    </div>
    <br>

    <h4>--->关键字：nowrap: white-space:nowrap</h4>
    <p>文本保留空白，直到遇到br标签为止 </p>
    <div id="box2">
        <p>
            这是一段文字。
            这是一段包含多个空格       的文字。
            后面是br标签。<br>
            这是一段文字。
        </p>
    </div>
    <br>

    <h4>--->关键字：pre: white-space:pre</h4>
    <p>保留空白符（几个空格就显示几格）和换行。
    </p>
    <div id="box3">
        <p>
            这是一段包含多个空格       的文字。
            这是一段包含多个空格       的文字。
        </p>
    </div>
    <br>

    <h4>--->关键字：pre-line: white-space:pre-line</h4>
    <p>合并空白符（多个空格合并为一格），但是保留换行符（编辑器如果是换行输入，浏览器也是显示换行）</p>
    <div id="box4">
        <p>
            这是一段文字这是一段包含多个空格      的文字。
            后面是br标签<br>
            这是一段包含空格    的文字。
        </p>
    </div>
    <br>

    <h4>--->关键字：pre-wrap: white-space:pre-wrap</h4>
    <p>保留空白符（几个空格就显示几格）但是正常地进行换行。
    </p>
    <div id="box5">
        <p>
            这是一段包含多个空格       的文字。
            后面是br标签<br>
            这是一段包含多个空格       的文字。
        </p>
    </div>

    <h2>    
        <a href="./目录.html">返回目录</a>
    </h2>

</body>

</html>